<template>
  <div>
  <q-dialog v-model="opn" minimized :content-css="{padding:'30px 50px 30px 50px'}">
    <q-card style="min-width: 400px">
            <h5 class="margin20">添加发送数据</h5>
            <q-card-section>
                <q-input dense v-model="SignName" placeholder="签名"></q-input>
                <!-- <q-input dense v-model="TemplateCode" placeholder="模板"></q-input> -->
                <q-select v-model="TemplateCode" :options="options" label="模板" />
                <q-input dense v-model="time" placeholder="时间"></q-input>
                
               </q-card-section>

           <q-btn-group class="margin20">
                <q-btn color="primary" @click="submit">确认发送</q-btn>
            </q-btn-group>
            <q-btn-group class="margin20">
                <q-btn color="secondary" @click="opn = false" label="关闭" />
            </q-btn-group>
            </q-card>
        </q-dialog>

      <q-dialog v-model="edtopn">
      <q-card>
        <q-card-section>
          <div>Alert</div>
        </q-card-section>

        <q-card-section>
                <q-input dense v-model="BM" placeholder="编号" disable="false"></q-input>
                <q-input dense v-model="Phone" placeholder="电话号码"></q-input>
                
                
               </q-card-section>

        <q-btn-group class="margin20">
                <q-btn color="primary" @click="resave">保存</q-btn>
            </q-btn-group>
            <q-btn-group class="margin20">
                <q-btn color="secondary" @click="edtopn = false" label="关闭" />
            </q-btn-group>
      </q-card>
    </q-dialog>
  <div class="row">
   <div class="col">
     <!-- <h5 class="title">发送列表</h5> -->
     <!-- <q-btn-group outline> -->
                    <!-- <q-btn color="blue" @click="add" icon="add" label="导入excel文件"></q-btn> -->
                    <div class="row">
                    <!-- <div class="col"> -->
                    <q-uploader
                    label="请选择xlsx文件"
                    field-name="uploadfile" 
                    @uploaded="uploaded"
                    :factory="factoryFn"
                    style="max-width: 300px;margin:0 auto;"
                    />
                    </div>
                    <!-- </div> -->
                    <div class="row" >
                    <q-btn color="blue" @click="confirm"  label="发送短信"></q-btn>
                    </div>
                    
                    <!-- </q-btn-group> -->
   <q-table
      title="发送列表"
      :data="data"
      :columns="columns"
      
    />
  </div>
  <div class="col">
    <h5 class="title">{{alertdata}}</h5> 
   <q-btn-group outline>
                    <q-btn color="blue" @click="edt" icon="create" label="修改号码"></q-btn>
                    <q-btn color="blue" @click="reconfirm" label="重新发送"></q-btn>
                    </q-btn-group>
   <q-table
      title="失败列表"
      :data="fdata"
      :columns="columns"
      :selection="sltmode"
      :selected.sync="slt"
      :pagination.sync="pagination" 
      row-key="bm"
       />
  </div>
  </div>
  <!-- <div class="q-pa-md">
    <q-table
      title="Treats"
      :data="data"
      :columns="columns"
      row-key="name"
    />
  </div> -->
  </div>
</template>

<script>
  import axios from 'axios'
  import {
         QSelect,
         Quasar,
         QUploader,
         QInput,
         QCardSection,
         QCardActions,
         QCard,
         QDialog,
         QBtnGroup,
         QBtn,
         QTable,
         QTh,
         QTr,
         QTd
    } from 'quasar'
export default {
      components: {
          QSelect,
          QTable,
          QUploader,
          QInput,
          QCardSection,
          QCardActions,
          QCard,
          QDialog,
          QBtnGroup,
          QBtn,
          QTh,
          QTr,
          QTd
        },
  data () {
    return {
       options:[],
       BM:'',
       Phone:'',
       edtopn:false,
       pagination: {
                    //descending: false,
                    rowsPerPage: 10,
                    // page: 1,
                    // rowsNumber: 0
                },
      sltmode: 'single',
      slt: [],
      tempdata:[],
      maps:[],
      test:[],
      SignName:'',
      TemplateCode:'',
      time:'',
      alertdata:'',
      opn:false,
      alert:false,
      columns: [
        // {
        { name: 'bm', label: '编码', field: 'bm' },
        { name: 'phone', label: '电话号码', field: 'phone' }
       
      ],
      fdata:[],
      data: [
       
      ]
    }
  },
  methods: {
    getoptions(){
      var self = this
         axios.post('/getall', {
                       
                    })
                    .then(function(response) {
                        var rt = response.data
                        if (rt.success) {
                             console.log(rt)
                            // self.options.label= rt.templ
                            var temp={label:'',value:''}
                            for (let i = 0; i< rt.templ.length; i++) {
                                   temp.label=rt.templ[i].name
                                   temp.value=rt.templ[i].code
                                   self.options.push(temp)
                                   temp={}
                                  } 
                                
                             
                           } else {
                           
                        }
                    })
                    .catch(function(error) {
                        self.$q.notify('未知错误！')
                    })
              
    },
    factoryFn (files) {
      var self=this
      self.test=files
      //console.log(files)
      return new Promise((resolve) => {
        // simulating a delay of 2 seconds
        setTimeout(() => {
          resolve({
            url: 'upfile',
            method: 'POST'
          })
        }, 300)
   
      })
       //  console.log(Promise)
    },
    edt() {
                var self = this
               if (this.slt.length != 1) {
                    this.$q.notify('请只选择一条记录进行修改！')
                    return
                }
                self.edtopn = true
                var tmp=self.slt[0]
                console.log(tmp)
                 self.BM = tmp.bm
                 self.Phone = tmp.phone
                
          },
    resave() {
                var self = this
               
                
                //var tmp=self.slt[0]
                 console.log(self.slt[0])
                 self.slt[0].bm = self.BM
                 self.slt[0].phone = self.Phone
                 self.slt=[]
                 self.edtopn = false
          },              
    uploaded(info) {
      var self=this;
      console.log(self.test[0].xhr.response)
      var jstest= JSON.parse(self.test[0].xhr.response)
      console.log(jstest)
      var colname=[]
      for (var key in jstest.rs[0]){
          console.log(key)
          colname.push(key)
        }
      for (let index = 0; index < jstest.maps.length; index++) {
       
        var col={name: colname[index+2], label: jstest.maps[index], field: colname[index+2] }
        self.columns.push(col)
      } 
      console.log(self.columns)
      self.maps=jstest.maps
      self.data=jstest.rs
      self.SignName=jstest.signstr
    
    },
    confirm() {
     var self = this
     self.opn = true
     self.tempdata=self.data
     self.data=[]
    },
    reconfirm() {
     var self = this
     self.opn = true
     self.tempdata=self.fdata
    },
    submit() {
        
        var self = this
        //self.opn = true
        self.fdata=[]
                axios.post('/sendmsg', {
                        maps: self.maps,
                        rs: self.tempdata,
                        signName: self.SignName,
                        templateCode: self.TemplateCode.value,
                        time: self.time

                    })
                    .then(function(response) {
                        var rt = response.data
                        if (rt.success) {
                          console.log(response)
                            self.fdata=rt.srt.Flist
                            self.alertdata='成功'+rt.srt.SC+'失败'+rt.srt.FC+'失败原因'+rt.srt.FS
                        } else {
                            self.$q.notify('出错了！')
                        }
                    })
                    .catch(function(error) {
                        self.$q.notify('未知错误！')
                    })
                   
         self.opn = false           
    },
      
  },
  mounted: function() {
    var self = this
          self.getoptions();
        }
}
</script>

<style lang="stylus">

.title
  text-align center
  margin 12px

.margin20 
  margin 20px
.upstyle
 height 120px
  
</style>